<template>
  <view class="item-content image-content">
    <template v-for="media in images" :key="media">
      <!-- 视频显示 -->
      <view v-if="isVideo(media)" class="video-wrapper" @click="handlePreview(media)">
        <image :src="media + '?vframe/jpg/offset/0'" class="content-video" mode="aspectFill" />
        <view class="play-icon-wrapper">
          <image src="/static/icons/play.svg" class="play-icon" />
        </view>
      </view>
      <!-- 图片显示 -->
      <image v-else :src="generateThumbnailUrl(media)" mode="aspectFill" class="content-image" @click="handlePreview(media)" />
    </template>

    <!-- 添加预览组件 -->
    <MediaPreview v-if="previewUrl" :url="previewUrl" @close="previewUrl = ''" />
  </view>
</template>

<script setup>
import MediaPreview from '../preview/MediaPreview.vue'
import { ref } from 'vue'

const previewUrl = ref('')

// 修改预览处理函数
const handlePreview = (url) => {
  uni.previewImage({
    current: url,
    urls: props.images,
    loop: true,
    indicator: 'number',
  });
}
const props = defineProps({
  images: {
    type: Array,
    required: true
  }
})

const isVideo = (url) => {
  return /\.(mp4|webm|ogg|mov)$/i.test(url)
}

function generateThumbnailUrl(url) {
  // 支持的文件扩展名列表（小写）
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
  
  // 分割哈希部分
  const hashIndex = url.indexOf('#');
  const hashPart = hashIndex > -1 ? url.slice(hashIndex) : '';
  const baseUrl = hashIndex > -1 ? url.slice(0, hashIndex) : url;

  // 分割查询参数
  const queryIndex = baseUrl.indexOf('?');
  const queryPart = queryIndex > -1 ? baseUrl.slice(queryIndex) : '';
  const pathPart = queryIndex > -1 ? baseUrl.slice(0, queryIndex) : baseUrl;

  // 分割路径部分
  const pathSegments = pathPart.split('/');
  const filename = pathSegments.pop();

  // 处理文件名
  const dotIndex = filename.lastIndexOf('.');
  if (dotIndex === -1) return url; // 根据要求不考虑无后缀情况
  
  const ext = filename.slice(dotIndex + 1).toLowerCase();
  if (!imageExtensions.includes(ext)) return url;

  const newFilename = 
    filename.slice(0, dotIndex) + 
    '.min' + 
    filename.slice(dotIndex);

  // 重组URL
  pathSegments.push(newFilename);
  return pathSegments.join('/') + queryPart + hashPart;
}

// const handlePreview = (url) => {
//   if (isVideo(url)) {
//     // 视频预览处理
//     uni.navigateTo({
//       url: `/pages/video/player?url=${encodeURIComponent(url)}`
//     })
//   } else {
//     // 图片预览处理
//     uni.previewImage({
//       urls: [url]
//     })
//   }
// }
</script>

<style lang="scss" scoped>
.image-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;

  .content-image,
  .content-video {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.1);
  }

  .video-wrapper {
    position: relative;
    width: 200rpx;
    height: 200rpx;
  }

  .play-icon-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60rpx;
    height: 60rpx;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .play-icon {
    width: 100%;
    height: 100%;
  }
}
</style>